<script setup lang="ts">
import type { Rule } from 'ant-design-vue/es/form'
import {
  codeValidator,
  nameValidator,
} from '~/utils/form-validator.ts'
import type { PermissionReq } from '~/api/setting/model/permission.ts'
import { createPermissionApi, modifyPermissionApi } from '~/api/setting/permission.ts'

const props = defineProps({
  permissionData: Object,
  optType: {
    type: String,
    default: 'create',
  },
})

const emits = defineEmits(['onSaveSuccess'])

const message = useMessage()

const permissionReq = ref<PermissionReq>({
  permissionName: undefined,
  permissionCode: undefined,
  sort: 1,
  note: undefined,
})

const permissionCreateFormRef = ref()
const rules: Record<string, Rule[]> = {
  permissionName: [
    { required: true, message: '请输入权限名称' },
    { validator: nameValidator, trigger: 'blur' },
  ],
  permissionCode: [
    { required: true, message: '请输入权限编码' },
    { validator: codeValidator, trigger: 'blur' },
  ],
  sort: [
    { required: true, message: '请输入排序' },
  ],
}

/**
 * 初始化权限
 */
async function init() {
  if (props.permissionData) {
    permissionReq.value = props.permissionData
  }
}

const confirmLoading = shallowRef(false)

async function onSavePermission() {
  if (props.optType === 'create') {
    await onCreatePermission()
  } else {
    await onEditPermission()
  }
}

/**
 *  添加用户
 */
async function onCreatePermission() {
  permissionCreateFormRef.value
    .validate()
    .then(() => {
      confirmLoading.value = true
      createPermissionApi(permissionReq.value).then((response) => {
        if (response) {
          message.success('新建成功')
          emits('onSaveSuccess', 'create')
        }
      }).finally(() => {
        confirmLoading.value = false
        close()
      })
    })
    .catch((error) => {
      console.log('permissionCreateFormRef::error', error)
    })
}

/**
 *  编辑用户
 */
async function onEditPermission() {
  permissionCreateFormRef.value
    .validate()
    .then(() => {
      confirmLoading.value = true
      modifyPermissionApi(permissionReq.value).then((response) => {
        if (response) {
          message.success('修改成功')
          emits('onSaveSuccess', 'edit')
        }
      }).finally(() => {
        confirmLoading.value = false
        close()
      })
    })
    .catch((error) => {
      console.log('permissionCreateFormRef::error', error)
    })
}

onMounted(() => {
  init()
})
</script>

<template>
  <a-modal title="编辑权限" width="600px" :confirm-loading="confirmLoading" @ok="onSavePermission">
    <a-space direction="vertical" size="large" class="w-full">
      <a-form
        ref="permissionCreateFormRef"
        :model="permissionReq"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 14 }"
        layout="horizontal"
      >
        <a-form-item name="permissionName" label="权限名称">
          <a-input v-model:value="permissionReq.permissionName" placeholder="请输入权限名称" allow-clear />
        </a-form-item>
        <a-form-item name="permissionCode" label="权限编码">
          <a-input v-model:value="permissionReq.permissionCode" placeholder="请输入权限编码" allow-clear />
        </a-form-item>
        <a-form-item name="sort" label="排序">
          <a-input-number v-model:value="permissionReq.sort" placeholder="排序" allow-clear />
        </a-form-item>
        <a-form-item name="note" label="备注">
          <a-textarea
            v-model:value="permissionReq.note"
            :rows="4"
            placeholder="请输入备注"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </a-space>
  </a-modal>
</template>

<style lang="less" scoped>
.avatar-uploader {
  .ant-upload {
    width: 128px;
    height: 128px;
  }
}

.avatar-uploader-img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
